<template>
	<view class="content">
		<u-navbar :is-mp-wx="true" :is-back="false" :border-bottom="false">
			<template v-slot:content>
				<view class="slot-wrap">
					<u-search :placeholder="data.utype == 1 ? '请输入行业/技能' : '请输入要搜索的内容'" v-model="data.keyword"
						action-text="取消" @custom="custom" @search="search"></u-search>
				</view>
			</template>
		</u-navbar>
		<view class="content_main" v-if="data.historyList.length > 0">
			<view class="content_main_tit u-flex u-row-between">
				<view>
					历史搜索
				</view>
				<u-image src="/pages/pagesHome/static/trash.jpg" width="42" height="42" mode="widthFix"
					@click="data.isHistory = true"></u-image>
			</view>
			<view class="u-m-t-20 u-flex u-flex-wrap">
				<view class="content_main_item" v-for="(item,index) in data.historyList" :key="index"
					@click="search(item)">
					{{item}}
				</view>
			</view>
		</view>

		<u-modal v-model="data.isHistory" title="系统提示" content="确定清空搜索记录吗" show-cancel-button async-close
			@confirm="onClear" confirmColor="#00D075"></u-modal>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import {
		onShow
	} from '@dcloudio/uni-app'
	const data = reactive({
		utype: uni.getStorageSync('utype'),
		keyword: '',
		historyList: [],
		isHistory: false
	})
	onShow(() => {
		getHistoryKeyword()
	})
	// 搜索
	const search = (value) => {
		if (uni.$u.test.isEmpty(value)) return uni.$u.toast('搜索内容不能为空')
		uni.$u.route({
			url: '/pages/pagesHome/search/detail',
			params: {
				value
			},
			animationType: 'none'
		})
		data.keyword = ''
		saveKeyword(value)
	}

	// 点击取消按钮
	const custom = () => {
		var pages = getCurrentPages();
		var page = pages[pages.length - 2]
		// #ifdef MP-WEIXIN
		if (page.$page.fullPath == '/pages/home/home') {
			uni.$u.route({
				type: 'tab',
				url: '/pages/home/home'
			})
		}else if(page.$page.fullPath == '/pages/personal/index'){
			uni.$u.route({
				type: 'tab',
				url: '/pages/personal/index'
			})
		}else{
			uni.$u.route({
				type: 'back'
			})
		}
		// #endif
		// #ifndef MP-WEIXIN
		if (page.$page.path == '/pages/home/home') {
			uni.$u.route({
				type: 'tab',
				url: '/pages/home/home'
			})
		}else if(page.$page.path == '/pages/personal/index') {
			uni.$u.route({
				type: 'tab',
				url: '/pages/personal/index'
			})
		}else{
			uni.$u.route({
				type: 'back'
			})
		}
		// #endif
	}

	// 清空历史记录
	const onClear = () => {
		setTimeout(() => {
			uni.removeStorageSync('historyKeys');
			data.historyList = []
			data.isHistory = false
		}, 1000)
	}
	//加载历史搜索,自动读取本地Storage
	const getHistoryKeyword = () => {
		let res = uni.getStorageSync('historyKeys')
		if (res) {
			var historyKeys = JSON.parse(res);
			data.historyList = historyKeys;
		}
	}
	//保存关键字到历史记录
	const saveKeyword = (value) => {
		uni.getStorage({
			key: 'historyKeys',
			success: (res) => {
				let historyKeys = JSON.parse(res.data);
				let findIndex = historyKeys.indexOf(value);
				if (findIndex == -1) {
					historyKeys.unshift(value);
				} else {
					historyKeys.splice(findIndex, 1);
					historyKeys.unshift(value);
				}
				//最多10个纪录
				historyKeys.length > 10 && historyKeys.pop();
				uni.setStorageSync('historyKeys', JSON.stringify(historyKeys))
				data.historyList = historyKeys; //更新历史搜索
			},
			fail: (e) => {
				let historyKeys = [value];
				uni.setStorage({
					key: 'historyKeys',
					data: JSON.stringify(historyKeys)
				});
				data.historyList = historyKeys; //更新历史搜索
			}
		})
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		width: 100vw;
		padding: 0 30rpx;

		:deep(u-search) {
			width: 100%;
		}
	}

	.content {
		padding: 0 30rpx;

		&_main {
			&_tit {
				padding: 30rpx 0;
				border-bottom-width: 1rpx;
				border-bottom-style: solid;
				border-bottom-color: #bbbbbb;
			}

			&_item {
				background-color: #efefef;
				border-radius: 12rpx;
				padding: 16rpx 30rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				font-size: 26rpx;
				color: #101010
			}

		}
	}
</style>